<template>
    <view id="container" class="container-c">
        <view
            v-for="(item, index) in list"
            :id="'tab' + index"
            :class="['tab', active == index ? 'active' : '']"
            @click="onTab(index)"
            :key="index"
        >
            {{ item }}
        </view>
    </view>
</template>

<script lang="ts" setup>
import { defineProps, defineEmits } from 'vue'
const emits = defineEmits(['change'])
defineProps(['active', 'list'])

const onTab = (index: number) => {
    emits('change', index)
}
</script>

<style lang="scss">
.container-c {
    position: relative;
    display: inline-block;
    border-radius: 10rpx;
    overflow: auto;
    color: #565868;
    border: 1rpx solid #DEE0E3;
}
.tab {
    display: inline-block;
    padding: 0 20rpx;
    font-size: 24rpx;
    // width: 100rpx;
    // height: 50rpx;
    line-height: 50rpx;
    text-align: center;
}
.active {
    background-color: #EBEFFE;
    color: #3E5FF5;

}
</style>
